<template>
  <div class="movielist">
    <Header :showLogout="true"></Header>
    <div class="iconlist">
      <div class="iconwrap">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iconfontzhizuobiaozhun023131"></use>
        </svg>
        找电影
      </div>
      <div class="iconwrap">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bangdan"></use>
        </svg>
        豆瓣榜单
      </div>
      <div class="iconwrap">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shijian"></use>
        </svg>
        即将上映
      </div>
      <div class="iconwrap">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-piandan"></use>
        </svg>
        豆瓣片单
      </div>
    </div>
    <van-tabs
      v-model="active"
      title-active-color="#000"
      title-inactive-color="#888"
      line-height="0"
      @click="onClick"
    >
      <van-tab title="影院热映">
        <Swipe :showDou="swipeIndex"></Swipe>
      </van-tab>
      <van-tab title="豆瓣热门">
        <Swipe :showDou="swipeIndex"></Swipe>
      </van-tab>
    </van-tabs>
    <div class="recentnews">
      <div class="card">
        <div class="title">国内即将上映 <van-icon name="arrow" /></div>
        <div class="details">
          <div class="font">近期有3部热门电影</div>
          <div class="img img1"></div>
          <div class="img img2"></div>
          <div class="img img3"></div>
        </div>
      </div>
      <div class="card">
        <div class="title">全球值得期待 <van-icon name="arrow" /></div>
        <div class="details">
          <div class="font">近期有8部热门电影</div>
          <div class="img img4"></div>
          <div class="img img5"></div>
          <div class="img img6"></div>
        </div>
      </div>
    </div>
    <Rank></Rank>
    <h4>每日推荐</h4>
    <MovieCard
      :MovieCardData="MovieCardData"
      v-for="(i, index) in MovieCardData"
      :key="i.id"
      :index="index"
    ></MovieCard>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import Swipe from "./components/Swipe";
import Rank from "./components/Rank";
import MovieCard from "./components/MovieCard";
import Header from "../../components/Header.vue";
import { getMovieCardData } from "../../request/api";
import { onMounted } from "@vue/runtime-core";
export default {
  components: { Swipe, Rank, MovieCard, Header },
  setup() {
    let data = reactive({
      active: 0,
      MovieCardData: {},
      HotMovie: {},
      swipeIndex: 0,
    });
    const onClick = (index) => {
      data.swipeIndex = index;
      console.log(data.swipeIndex);
    };
    onMounted(() => {
      getMovieCardData().then((response) => {
        console.log(response.data);
        data.MovieCardData = response.data;
      });
    });
    return {
      ...toRefs(data),
      onClick,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab__text {
  font-size: 20px;
}
/deep/ .van-tabs__wrap {
  width: 200px;
}

.movielist {
  display: flex;
  flex-flow: column;
  height: 100%;
  h4 {
    margin-left: 20px;
  }
  .iconlist {
    display: flex;
    height: 70px;
    .iconwrap {
      margin: 10px;
      width: 80px;
      height: 50px;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0 0 5px #888;
      color: #888;
      .icon {
        width: 50px;
        height: 28px;
        display: block;
        margin: auto;
        margin-top: 4px;
      }
    }
  }
  .recentnews {
    height: 120px;
    display: flex;
    justify-content: space-around;
    padding-left: 5px;
    margin: 20px 0;
    .card {
      width: 150px;
      display: flex;
      flex-flow: column;
      box-shadow: 0 0 2px #888;
      padding: 10px;
      border-radius: 5px;
      justify-content: space-evenly;
      .title {
        font-size: 18px;
      }
      .details {
        font-size: 16px;
        display: flex;
        color: #888;
        .font {
          width: 80px;
        }
        .img {
          width: 30px;
          height: 50px;
          border-radius: 8px;
          display: inline-block;
          margin-right: -12px;
        }
        .img1 {
          background: url("../../assets/01.webp");
          background-size: cover;
          z-index: 99999;
        }
        .img2 {
          background: url("../../assets/02.webp");
          background-size: cover;
          z-index: 9999;
        }
        .img3 {
          background: url("../../assets/03.webp");
          background-size: cover;
          z-index: 999;
        }
        .img4 {
          background: url("../../assets/07.webp");
          background-size: cover;
          z-index: 99999;
        }
        .img5 {
          background: url("../../assets/05.webp");
          background-size: cover;
          z-index: 9999;
        }
        .img6 {
          background: url("../../assets/06.webp");
          background-size: cover;
          z-index: 999;
        }
      }
    }
  }
}
</style>